<template>
	<view class="body">
		<view class="section">
			<img style="" class="icon"
			     src="https://img.js.design/assets/img/671b4acc90fc07a8da202ccc.png#3ce0b5624c2e5ac10ac05d7464110c8e"/>
			<text @tap="
        sheep.$router.go('/pages/coupon/detail', {
          id: 15,
        })
      ">新手攻略</text>
		</view>
		<view class="section">
			<img class="icon"
			     src="https://img.js.design/assets/img/671b4acc7dd312149ed49ed1.png#d11b337e651cd9f6b64c0bdd2b06284d"/>
			<text @tap="
        sheep.$router.go('/pages/coupon/detail', {
          id: 14,
        })
      ">订阅套餐</text>
		</view>
		<view class="section">
			<img class="icon"
			     src="https://img.js.design/assets/img/671b49a34bb2e8ffc06ad0cc.png#193dd0feaf8a290d4c7acece2a56d910"/>
			<text @tap="
        sheep.$router.go('/pages/coupon/list')
      " class="">最新通知</text>
		</view>
	</view>
</template>

<script setup>
import sheep from "@/sheep";
// JS部分根据需要添加
</script>

<style lang="scss" scoped>
.body {
	box-shadow: 1px 1px 30px #fff7eb;
	border-radius: 20rpx;
	padding: 5rpx;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
	display: flex; /* 使用flex布局 */
	justify-content: space-around; /* 使元素平均分布 */
	align-items: center; /* 居中对齐元素 */
	top: 158px;
	width: 99%;
  color: #FFFFFF;
	height: 32px;
	opacity: 1;
  background: linear-gradient(to right,#3E3A39, #3E3A39, #3E3A39);
}

.section {
	display: flex; /* 同样使用flex布局 */
	align-items: center; /* 居中对齐元素 */
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 23.17px;
	text-decoration-line: underline;

	.clickable-text {
		color: #ffffff; /* 超链接蓝色 */
		//text-decoration: underline; /* 鼠标悬停时添加下划线 */
		margin-right: 10rpx;
	}
}

.icon {
	width: 24px; /* 图标宽度 */
	height: 24px; /* 图标高度 */
	margin-right: 8px; /* 图标和文字之间的间距 */
}
</style>
